<template>
    <view class="goods-item" @tap="toDetail">
		<view class="top">
			<view class="img-box">
				<image class="image" :src="item.pic" :lazy-load="true" @load="finishLoad"></image>
				<view class="loading" v-if="loading">
					<view class="load-item pink"></view>
					<view class="load-item red"></view>
					<view class="load-item orange"></view>
					<view class="load-item yellow"></view>
				</view>
				<view class="group-number">{{ item.groupUserNumber }}人团</view>
				<view class="new-person" v-if="item.newPerson === 1">新人专享</view>
			</view>
			<view class="goods-content">
				<view class="header">
					<view class="goods-name">{{ item.title }}</view>
					<view class="deserved-money">未拼中奖励{{ item.deservedMoney }}元红包</view>
				</view>
				<view class="price">
					<view class="group-price">拼团价<text class="symbol">¥<text class="text">{{ item.groupPrice }}</text></text></view>
					<view class="end-price">¥{{ item.price }}</view>
				</view>
			</view>
		</view>
		<view class="group-info">
			<view class="left" v-if="groupTime <= 0 || item.status === 3 || item.status === 2">已开团</view>
			<view class="left" v-else>{{ groupType === 0 ? '参团倒计时' : '开团倒计时' }}：<u-count-down :timestamp="groupTime" :show-days="false" color="#333333" separator-color="#333333" bg-color="#FFF9DE"></u-count-down></view>
			<view class="right">
				<view class="img-group" v-if="item.usersInfo && item.usersInfo.length > 0">
					<image class="image" :src="pic.headImg" v-for="pic in item.usersInfo"></image>
				</view>
				<template v-if="groupTime <= 0 || item.status === 3 || item.status === 2">
					<text>{{ item.groupUserNumber + '/' + item.groupUserNumber }}</text>
				</template>
				<template v-else>
					<text v-if="item.isAddRobot === 1">
						<text v-if="item.newPerson === 1">
							<text v-if="type === 'order'">{{ item.groupRobotUserNumber + 1 + '/' + item.groupUserNumber }}</text>
							<text v-else>{{ item.groupRobotUserNumber + '/' + item.groupUserNumber }}</text>
						</text>
						<text v-else>{{ (item.alreadyGroupUserNumber + item.groupRobotUserNumber) + '/' + item.groupUserNumber }}</text>
					</text>
					<text v-else>{{ item.alreadyGroupUserNumber + '/' + item.groupUserNumber }}</text>
				</template>
			</view>
		</view>
    </view>
</template>

<script>
	import moment from '@/utils/packges/moment'
    export default {
        name: "GoodsItem",
        props: {
            item: {
                type: Object,
                default: () => {
                    return {}
                }
            },
			type: {
				type: String,
				default: () => {
					return '';
				}
			},
			index: {
				type: Number,
				default: () => {
					return 0;
				}
			}
        },
		data() {
			return {
				loading: true,
				groupTime: 0,
				groupType: 0, // 0 未开始 1 已开始
			}
		},
		created() {
			// 计算剩余时长
			if (parseInt(this.item.startTime  / 1000) - parseInt(moment().format('X')) > 0) {
				this.groupTime = parseInt(this.item.startTime / 1000) - parseInt(moment().format('X'))
				this.groupType = 0;
			} else {
				this.groupTime = parseInt(this.item.endTime / 1000) - parseInt(moment().format('X'))
				this.groupType = 1;
			}
			// if (this.item.status === 1 && this.item.newPerson === 1) {
			// 	this.groupType = 1;
			// 	this.groupTime = 1800;
			// }
		},
		methods: {
			// 图片加载完成
			finishLoad() {
				this.loading = false;
			},
			// 去商品详情页
			toDetail() {
				if (this.type === 'order') {
					uni.navigateTo({
						url: '/pages/group/detail?gid=' + this.item.combinationId
					})
				} else {
					uni.navigateTo({
						url: '/pages/goods/detail?gid=' + this.item.id
					})
				}
				
				// #ifdef MP-WEIXIN
				if (this.type === 'order') {
					uni.reportAnalytics('click_shangpinkp_pt');
				} else {
					uni.reportAnalytics('click_shangpinkp');
					if (this.index <= 4) {
						uni.reportAnalytics('click_shangpinkp' + (this.index + 1));
					}
				}
				// #endif
			}
		}
    }
</script>

<style lang="scss" scoped>
.goods-item {
	width: 710rpx;
	box-sizing: border-box;
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	padding: 20rpx;
	.top {
		@include flexBox(center, flex-start);
		.img-box {
			width: 224rpx;
			height: 224rpx;
			position: relative;
			margin-right: 20rpx;
			border-radius: 16rpx;
			overflow: hidden;
			.image {
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.group-number {
				position: absolute;
				background: $main-color;
				bottom: 0;
				left: 0;
				padding: 4rpx 12rpx;
				border-radius: 0 16rpx 0 16rpx;
				color: #333333;
				font-size: 26rpx;
			}
			.new-person {
				position: absolute;
				background: $main-color-text;
				bottom: 0;
				left: 0;
				padding: 4rpx 12rpx;
				border-radius: 0 16rpx 0 16rpx;
				color: #fff;
				font-size: 26rpx;
			}
		}
		.goods-content {
			flex: 1;
			overflow: auto;
			height: 224rpx;
			@include flexBox(space-between, flex-start, column);
			.header {
				.goods-name {
					font-size: 28rpx;
					color: #333333;
					@include ellipsis(2);
					font-weight: 600;
					margin-bottom: 20rpx;
				}
				.deserved-money {
					background: #FFF0F2;
					color: $main-color-text;
					padding: 6rpx 22rpx;
					border-radius: 50rpx;
					font-size: 26rpx;
					width: fit-content;
				}
			}
			.price {
				color: #9A9A9A;
				@include flexBox(flex-start, flex-end);
				.group-price {
					font-size: 24rpx;
					.symbol {
						font-size: 28rpx;
						color: $main-color-text;
						.text {
							font-size: 38rpx;
							margin-right: 16rpx;
							font-weight: 600;
						}
					}
				}
				.end-price {
					color: #9A9A9A;
					font-size: 22rpx;
					text-decoration: line-through;
				}
			}
		}
	}
	.group-info {
		margin-top: 20rpx;
		color: #333333;
		font-size: 26rpx;
		@include flexBox(space-between, center);
		.right {
			background: #FFF9DE;
			padding: 4rpx 12rpx;
			border-radius: 50rpx;
			color: #333333;
			@include flexBox(center)
			.img-group {
				width: 82rpx;
				position: relative;
				margin-right: 10rpx;
				@include flexBox(center)
				.image {
					width: 48rpx;
					height: 48rpx;
					border: 2rpx solid #fff;
					border-radius: 50rpx;
					&:nth-child(2) {
						margin-left: -20rpx;
					}
				}
			}
		}
	}
}
</style>
